<!--
  @Description:自定义导航-目录配置
  @Author:zqy
  @Date:2023-08-27 16:20:35
  @Last Modified by:zqy
  @Last Modified time:2023-08-27 16:36:23
-->
<template>
  <div>
    <table-box
      v-if="tabDefineId"
      ref="refTable"
      class="nav-tab-list"
      :selected-arry.sync="tableSelected"
      :table-config="tableConfig"
      :other-filters="otherFilters"
      table-row-key="id"
      :off-set="-20"
      :table-sortable="false"
      :show-custom-setting="false"
      :table-tree-props="{children: 'children', hasChildren: 'hasChildren'}"
      @btnOperate="btnOperate"
    >
      <div slot="outerbtn-before" class="head-tips"><i class="el-icon-info" /><span>目录最多创建{{ tabLevelName }}</span></div>
    </table-box>

    <DirectoryConfigEdit
      v-if="showEdit"
      :visible.sync="showEdit"
      :detail-data="detailData"
      :tab-define-id="tabDefineId"
      :tab-show-level="tabDefineData.showLevel"
      @success="refreshTable"
    />
    <DirectoryContent
      v-if="showRelativeConfig"
      :visible.sync="showRelativeConfig"
      :detail-data="detailData"
      @success="refreshTable"
    />
  </div>
</template>

<script>
import DirectoryConfigEdit from './DirectoryConfigEdit'
import DirectoryContent from './DirectoryContent'
import TabConfigMixin from '@/mixins/TabConfigMixin'
export default {
  name: 'DirectoryConfig',
  components: { DirectoryConfigEdit, DirectoryContent },
  mixins: [TabConfigMixin],
  data() {
    const that = this
    return {
      tableConfig: {
        interfacePath: `${process.env.VUE_APP_BASE_API}/api/v1/v2TabConf/page`,
        tabIndex: 203,
        hideSearchBar: true,
        buttonGroupCode: 'directoryConfig',
        sort: 'sort',
        order: 'asc',
        setting: [
          {
            prop: 'tabName',
            label: '目录名称',
            minWidth: 150
          },
          {
            prop: 'picUrl',
            label: '目录图片',
            width: 150,
            overflowHidden: false,
            sortable: false,
            type: 'hidden',
            align: 'center',
            render: (_h, row) => {
              const iconUrl = row.picUrl || ''
              if (iconUrl) {
                const url = that.formatImageUrl(iconUrl)
                return (<div class='cover-image'><img src={url} /></div>)
              }
              return ''
            }
          },
          {
            prop: 'sort',
            label: '排序',
            width: 200,
            sortable: false,
            type: 'hidden',
            overflowHidden: false,
            render: (_h, row) => {
              const btns = []
              if (this.hasPermission('top')) {
                btns.push(<el-button type='text' size='mini' onClick={that.handleSort.bind(this, row, 'top')} class='btn-green my-txt-btn'>置顶</el-button>)
              }
              if (this.hasPermission('up')) {
                btns.push(<el-button type='text' size='mini' onClick={that.handleSort.bind(this, row, 'moveUp')} class='btn-green my-txt-btn'>上移</el-button>)
              }
              if (this.hasPermission('down')) {
                btns.push(<el-button type='text' size='mini' onClick={that.handleSort.bind(this, row, 'moveDown')} class='btn-green my-txt-btn'>下移</el-button>)
              }
              if (this.hasPermission('bottom')) {
                btns.push(<el-button type='text' size='mini' onClick={that.handleSort.bind(this, row, 'bottom')} class='btn-green my-txt-btn'>置底</el-button>)
              }
              return _h('div', btns)
            }
          },
          {
            prop: 'opetate',
            label: '操作',
            width: 220,
            sortable: false,
            type: 'hidden',
            overflowHidden: false,
            render: (_h, row) => {
              const btns = []
              if (this.hasPermission('edit')) {
                btns.push(<el-button type='text' size='mini' onClick={that.handleEdit.bind(this, row)} class='btn-green my-txt-btn'>编辑基础信息</el-button>)
                if (that.isLastNode(row.levelType)) {
                  btns.push(<el-button type='text' size='mini' onClick={that.handleOpenRelative.bind(this, row)} class='btn-green my-txt-btn'>关联内容</el-button>)
                }
              }
              if (this.hasPermission('addChild') && !that.isLastNode(row.levelType)) {
                btns.push(<el-button type='text' size='mini' onClick={that.handleAddChild.bind(this, row)} class='btn-green my-txt-btn'>新增子目录</el-button>)
              }
              if (this.hasPermission('del')) {
                btns.push(<el-button type='text' size='mini' onClick={that.handleDelete.bind(this, row)} class='btn-green my-txt-btn'>删除</el-button>)
              }
              return _h('div', btns)
            }
          }
        ],
        btnList: [
          {
            buttonName: '新增一级目录',
            optCode: 'add',
            outerFlag: true
          }]
      },
      showRelativeConfig: false
    }
  },
  methods: {
    handleOpenRelative(row) {
      this.detailData = row
      this.$nextTick(() => {
        this.showRelativeConfig = true
      })
    }
  }
}
</script>
<style lang='scss' scoped>
  .my-txt-btn{
    padding: 0 !important;
  }
  .picIcon{
    width: 48px;
    height: 48px;
    line-height: 1;
    font-size: 48px;
    color: #333;
  }
 .cover-image{
    padding: 5px 0;
    line-height: 0;
    font-size: 0;
    img{
      max-height: 30px;
      max-width: 100px;
      object-fit: cover;
    }
  }
.nav-tab-list{
  /deep/ .function-box{
    .btn-box{
      display: flex;
      flex: 1;
    }
    .head-tips{
      flex: 1;
      line-height: 28px;
      color: #999;
    }
    .head-tips~.el-button{
      margin-top: 0 !important;
    }
  }
  /deep/ .table-list-box{
    .cell{
      display: flex;
      align-items: center;
    }
  }
}
</style>
